<template>
  <div class="box">
    <van-nav-bar
      title="我的钱包"
      left-arrow
      @click-left="onClickLeft"
      style="background-color: #3087ea; color: white"
    />

    <div class="cztxtype">
      <div class="Hb">
        <p style="font-size: 40px; color: #3087ea; line-height: 100px">{{ subtraction }}</p>
        <p style="color: #3087ea">H币</p>
      </div>
      <p class="mbktx">满2000H币可提现</p>
      <div class="buttanz">
        <van-button size="small" style="color: #3087ea" @click="Withdrawal">提现</van-button>
        <van-button size="small" style="color: #3087ea" @click="Recharge">充值</van-button>
      </div>
    </div>
    <div class="jyjlty">
      <div class="sjdx" v-for="item in items" :key="item.id">
        <div style="float: left; margin: 5px">
          <p>{{ item.name }}</p>
          <p style="font-size: 12px; color: #ccc">{{ item.quantity }}</p>
        </div>
        <span style="float: right; line-height: 50px; margin-right: 10px; color: #3087ea">{{
          item.price
        }}</span>
      </div>
    </div>

    {{ tokender }}
  </div>
</template>

<script>
import { ref, onMounted, reactive,computed } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'MultiDataComponent',

  setup() {
    const totalHCoins = ref(100)
    const items = reactive([
      { id: 1, name: '问诊咨询', quantity: '2018.11.10', price: '-500H币' },
      { id: 2, name: '签到', quantity: '2018.11.9', price: '+10H币' },
      { id: 3, name: '参与活动', quantity: '2018.11.08', price: '-20H币' },
      { id: 4, name: '发布病历', quantity: '2018.11.07', price: '+50H币' },
      { id: 5, name: '提现', quantity: '2018.11.06', price: '-300H币' },
      { id: 6, name: '签到', quantity: '2018.11.05', price: '+10H币' },
      { id: 7, name: '参与活动', quantity: '2018.11.04', price: '-50H币' }
    ])
   const route = useRoute()  
    const comprehensive = parseInt(route.query.totaly || '0', 10) // 尝试将查询参数转换为整数，如果失败则默认为0  
  
    // 使用 computed 来计算 subtraction  
    const subtraction = computed(() => {  
      return totalHCoins.value - comprehensive  
    })  
    const tokender = ref(0); // 初始值设为0  
  
    // 生命周期钩子，用于在组件挂载后立即执行  
    onMounted(async () => {  
      try {  
        const response = await fetch('http://localhost:3210/api/get/HBI');  
        if (!response.ok) {  
          throw new Error('网络响应错误');  
        }  
        const data = await response.json();  
        // 假设返回的数据结构中有total字段  
        tokender.value = data.total || 0; // 更新响应式数据  
      } catch (error) {  
        console.error('获取 H 币余额失败:', error);  
      }  
    });  
    return { items, totalHCoins,subtraction,tokender }
  },
  methods: {
    Recharge() {
      this.$router.push({ path: '/recharge' })
    },
    Withdrawal() {
      // 将 totalHCoins 的值作为查询参数添加到路由中
      this.$router.push({ path: '/withdrawal', query: { totalHCoins: this.subtraction } })
    }
  }
}
</script>
<style scoped>
.box {
  background-color: #ccc;
}
::v-deep .van-nav-bar__title .van-ellipsis {
  color: #ffffff;
}
::v-deep.van-nav-bar .van-icon {
  color: white;
}
.cztxtype {
  width: 100%;
  height: 260px;
  background-color: #3087ea;
  position: relative;
}

.Hb {
  width: 120px;
  height: 120px;
  background-color: white;
  border-radius: 50%;
  text-align: center;
  margin: 20px 128px 20px 128px;
  position: absolute;
  float: left;
}
.mbktx {
  float: left;
  position: absolute;
  bottom: 0;
  color: white;
  font-size: 10px;
  margin-left: 145px;
  margin-bottom: 100px;
}
.buttanz {
  float: left;
  width: 100%;
  height: 35px;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 30px;
}
.jyjlty {
  width: 100%;
  height: 100%;
  margin-top: 5px;
  background-color: white;
}
.sjdx {
  width: 100%;
  height: 50px;
  /* background-color: aqua; */
}
</style>